<script setup>
</script>

<template>
  <!-- 主体内容 -->
  <div class="main">
    <div class="w">
      <!-- 文章列表 -->
      <div class="list home_list">
        <!-- 小圆点 -->
        <div class="dots">
          <ol>
            <li></li>
            <li></li>
            <li></li>
          </ol>
        </div>

        <!-- 列表 -->
        <ul>
          <li>
            <!-- 文章缩略图 -->
            <div class="left">
              <a href="./article.html">
                <img src="@/assets/aritcle/1.webp"
                     alt="">
              </a>

              <span class="tags_blue">开发记录</span>
            </div>

            <!-- 文章内容 -->
            <div class="right">
              <!-- 文章标题 -->
              <h2>
                <a href="./article.html">
                  <span class="tags_purple">精品</span> <span class="tags_red">置顶</span> <span
                    class="tags_yellow">推荐</span>
                  大厂裁员下，程序员如何做“副业”？
                </a>
              </h2>

              <!-- 文章摘要 -->
              <p class="list-length">
                最近大厂裁员不断，好多人思考要不要搞个副业抵御风险。那你知道程序员的副业怎么做吗？来和我一探究竟吧～</p>

              <!-- 文章信息 -->
              <div class="meta">
                <!-- 作者头像 -->
                <a href="javascript:;">
                  <img src="@/assets/image/user.png" alt="">
                  <span>Admin</span>
                </a>

                <div>
                  <!-- 文章点赞数 -->
                  <a href="javascript:;"><i class="iconfont icon-dianzan"></i>264</a>
                  <!-- 文章浏览量 -->
                  <a href="javascript:;"><i class="iconfont icon-huo"></i>39537</a>
                  <!-- 文章发布时间 -->
                  <a href="javascript:;"><i class="iconfont icon-shijian"></i>2022-4-23 </a>
                </div>
              </div>
            </div>
          </li>

          <li>
            <!-- 文章缩略图 -->
            <div class="left">
              <img src="@/assets/aritcle/2.webp"
                   alt="">

              <span class="tags_yellow">大前端</span>
            </div>

            <!-- 文章内容 -->
            <div class="right">
              <!-- 文章标题 -->
              <h2>
                <a href="javascript:;">
                  <span class="tags_red">置顶</span>
                  一个96年前端的2022年中总结 (落户,看房,还贷,被裁)
                </a>
              </h2>

              <!-- 文章摘要 -->
              <p class="list-length">「时光不负，创作不停，本文正在参加2022年中总结征文大赛」 落户 关于落户这个事, 就是一个很突然的想法,很突然,
                得知天津有个"海河英才计划",只要是本科生, 就比较容易落户,所以就想着试一试, </p>

              <!-- 文章信息 -->
              <div class="meta">
                <!-- 作者头像 -->
                <a href="javascript:;">
                  <img src="@/assets/image/user.png" alt="">
                  <span>Admin</span>
                </a>

                <div>
                  <!-- 文章点赞数 -->
                  <a href="javascript:;"><i class="iconfont icon-dianzan"></i>869</a>
                  <!-- 文章浏览量 -->
                  <a href="javascript:;"><i class="iconfont icon-huo"
                                            style="color: #ee7273"></i>85971</a>
                  <!-- 文章发布时间 -->
                  <a href="javascript:;"><i class="iconfont icon-shijian"></i>2022-4-21 </a>
                </div>
              </div>
            </div>
          </li>

          <li>
            <!-- 文章缩略图 -->
            <div class="left">
              <img src="@/assets/aritcle/3.webp"
                   alt="">

              <span class="tags_blue">大前端</span>
            </div>

            <!-- 文章内容 -->
            <div class="right">
              <!-- 文章标题 -->
              <h2>
                <a href="javascript:;">从Spring为什么要用IoC的支点，我撬动了整个Spring的源码脉络！</a>
              </h2>

              <!-- 文章摘要 -->
              <p class="list-length">
                把镜头拉回到使用Spring后最大变化是什么？先从使用Spring的角度来看源码，好像事情也并没有那么错综复杂。
              </p>

              <!-- 文章信息 -->
              <div class="meta">
                <!-- 作者头像 -->
                <a href="javascript:;">
                  <img src="@/assets/image/user.png" alt="">
                  <span>Admin</span>
                </a>

                <div>
                  <!-- 文章点赞数 -->
                  <a href="javascript:;"><i class="iconfont icon-dianzan"></i>432</a>
                  <!-- 文章浏览量 -->
                  <a href="javascript:;"><i class="iconfont icon-huo"
                                            style="color: #ee7273"></i>61587</a>
                  <!-- 文章发布时间 -->
                  <a href="javascript:;"><i class="iconfont icon-shijian"></i>2022-4-20 </a>
                </div>
              </div>
            </div>
          </li>

          <li>
            <!-- 文章缩略图 -->
            <div class="left">
              <img src=""
                   alt="">

              <span class="tags_purple">大前端</span>
            </div>

            <!-- 文章内容 -->
            <div class="right">
              <!-- 文章标题 -->
              <h2>
                <a href="javascript:;">你的图片加载，一点都不酷炫！不信You Look Look</a>
              </h2>

              <!-- 文章摘要 -->
              <p class="list-length">
                对于图片加载，咱们可以更酷炫一点！ 比如这样！ 这样！ 这样！ 还有这样的！ 前言
                现代网站中的图片使用量是很大的，在一些门户网站中，还会有一些大尺寸的图片展示，这个时候图片如果加载不顺畅，是很影响用
              </p>

              <!-- 文章信息 -->
              <div class="meta">
                <!-- 作者头像 -->
                <a href="javascript:;">
                  <img src="@/assets/image/user.png" alt="">
                  <span>Admin</span>
                </a>

                <div>
                  <!-- 文章点赞数 -->
                  <a href="javascript:;"><i class="iconfont icon-dianzan"></i>267</a>
                  <!-- 文章浏览量 -->
                  <a href="javascript:;"><i class="iconfont icon-huo"></i>42376</a>
                  <!-- 文章发布时间 -->
                  <a href="javascript:;"><i class="iconfont icon-shijian"></i>2022-4-15 </a>
                </div>
              </div>
            </div>
          </li>

          <li>
            <!-- 文章缩略图 -->
            <div class="left">
              <img src="@/assets/aritcle/4.webp"
                   alt="">

              <span class="tags_red">框架</span>
            </div>

            <!-- 文章内容 -->
            <div class="right">
              <!-- 文章标题 -->
              <h2>
                <a href="javascript:;">大菠萝？Pinia已经来了，再不学你就out了</a>
              </h2>

              <!-- 文章摘要 -->
              <p class="list-length">
                Pinia优势 Pinia是一个全新的Vue状态管理库，是Vuex的代替者，尤雨溪强势推荐 Vue2 和 Vue3 都能支持 抛弃传统的 Mutation ，只有
                state,
                getter 和 ac</p>

              <!-- 文章信息 -->
              <div class="meta">
                <!-- 作者头像 -->
                <a href="javascript:;">
                  <img src="@/assets/image/user.png" alt="">
                  <span>Admin</span>
                </a>

                <div>
                  <!-- 文章点赞数 -->
                  <a href="javascript:;"><i class="iconfont icon-dianzan"></i>482</a>
                  <!-- 文章浏览量 -->
                  <a href="javascript:;"><i class="iconfont icon-huo"></i>42364</a>
                  <!-- 文章发布时间 -->
                  <a href="javascript:;"><i class="iconfont icon-shijian"></i>2022-4-11 </a>
                </div>
              </div>
            </div>
          </li>

          <li>
            <!-- 文章缩略图 -->
            <div class="left">
              <a href="./article.html">
                <img src="@/assets/aritcle/5.webp"
                     alt="">
              </a>

              <span class="tags_blue">开发记录</span>
            </div>

            <!-- 文章内容 -->
            <div class="right">
              <!-- 文章标题 -->
              <h2>
                <a href="./article.html">新一代前端应该使用的"开发套餐"</a>
              </h2>

              <!-- 文章摘要 -->
              <p class="list-length">众所周知，前端界，框架库一直处在学不过来，大佬们还一直在开发的
                黄金时代（卷王时代，bushi），在这个大卷王时代，我们有必要浅浅了解下这些新果实，不做上个时代的残党！</p>

              <!-- 文章信息 -->
              <div class="meta">
                <!-- 作者头像 -->
                <a href="javascript:;">
                  <img src="@/assets/image/user.png" alt="">
                  <span>Admin</span>
                </a>

                <div>
                  <!-- 文章点赞数 -->
                  <a href="javascript:;"><i class="iconfont icon-dianzan"></i>264</a>
                  <!-- 文章浏览量 -->
                  <a href="javascript:;"><i class="iconfont icon-huo"></i>39537</a>
                  <!-- 文章发布时间 -->
                  <a href="javascript:;"><i class="iconfont icon-shijian"></i>2022-4-23 </a>
                </div>
              </div>
            </div>
          </li>

          <li>
            <!-- 文章缩略图 -->
            <div class="left">
              <img src="@/assets/aritcle/5.webp"
                   alt="">

              <span class="tags_yellow">大前端</span>
            </div>

            <!-- 文章内容 -->
            <div class="right">
              <!-- 文章标题 -->
              <h2>
                <a href="javascript:;">
                  <span class="tags_yellow">推荐</span>
                  2022 年值得推荐的 Vue 库！
                </a>
              </h2>

              <!-- 文章摘要 -->
              <p class="list-length">大家好，我是CUGGZ。 今天来推荐几个实用的 Vue 库！ 1. 状态管理 （1）Pinia Pinia 是最新一代的 Vue
                轻量级状态管理库。它适用于 Vue 2.x 和 Vue 3.x。它是 </p>

              <!-- 文章信息 -->
              <div class="meta">
                <!-- 作者头像 -->
                <a href="javascript:;">
                  <img src="@/assets/image/user.png" alt="">
                  <span>Admin</span>
                </a>

                <div>
                  <!-- 文章点赞数 -->
                  <a href="javascript:;"><i class="iconfont icon-dianzan"></i>869</a>
                  <!-- 文章浏览量 -->
                  <a href="javascript:;"><i class="iconfont icon-huo"
                                            style="color: #ee7273"></i>85971</a>
                  <!-- 文章发布时间 -->
                  <a href="javascript:;"><i class="iconfont icon-shijian"></i>2022-4-21 </a>
                </div>
              </div>
            </div>
          </li>

          <li>
            <!-- 文章缩略图 -->
            <div class="left">
              <img src="@/assets/aritcle/4.webp"
                   alt="">

              <span class="tags_blue">大前端</span>
            </div>

            <!-- 文章内容 -->
            <div class="right">
              <!-- 文章标题 -->
              <h2>
                <a href="javascript:;">写了个git提交脚本，再也不用命令行了</a>
              </h2>

              <!-- 文章摘要 -->
              <p class="list-length">
                平时项目中我们绝大部分都是用bash命令行，或者用GUI可视化工具，无论是小乌龟还是gui工具，如果是工具比较推荐sourceTree，但是我更推荐git-fork,工具因人而已
              </p>

              <!-- 文章信息 -->
              <div class="meta">
                <!-- 作者头像 -->
                <a href="javascript:;">
                  <img src="@/assets/image/user.png" alt="">
                  <span>Admin</span>
                </a>

                <div>
                  <!-- 文章点赞数 -->
                  <a href="javascript:;"><i class="iconfont icon-dianzan"></i>432</a>
                  <!-- 文章浏览量 -->
                  <a href="javascript:;"><i class="iconfont icon-huo"
                                            style="color: #ee7273"></i>61587</a>
                  <!-- 文章发布时间 -->
                  <a href="javascript:;"><i class="iconfont icon-shijian"></i>2022-4-20 </a>
                </div>
              </div>
            </div>
          </li>

          <li>
            <!-- 文章缩略图 -->
            <div class="left">
              <img src="@/assets/aritcle/3.webp"
                   alt="">

              <span class="tags_purple">大前端</span>
            </div>

            <!-- 文章内容 -->
            <div class="right">
              <!-- 文章标题 -->
              <h2>
                <a href="javascript:;">让MacBook成为生产力｜软件推荐｜环境配置</a>
              </h2>

              <!-- 文章摘要 -->
              <p class="list-length">
                本文梳理了推荐MacBook安装的一些高效软件，能够满足绝大部分的办公以及日常生活需求。其次，陈述了对于开发者必备的环境配置要求。最后总结了一些开发语言和工具的下载地址以及安装注意事项。
              </p>

              <!-- 文章信息 -->
              <div class="meta">
                <!-- 作者头像 -->
                <a href="javascript:;">
                  <img src="@/assets/image/user.png" alt="">
                  <span>Admin</span>
                </a>

                <div>
                  <!-- 文章点赞数 -->
                  <a href="javascript:;"><i class="iconfont icon-dianzan"></i>267</a>
                  <!-- 文章浏览量 -->
                  <a href="javascript:;"><i class="iconfont icon-huo"></i>42376</a>
                  <!-- 文章发布时间 -->
                  <a href="javascript:;"><i class="iconfont icon-shijian"></i>2022-4-15 </a>
                </div>
              </div>
            </div>
          </li>

          <li>
            <!-- 文章缩略图 -->
            <div class="left">
              <img src="@/assets/aritcle/2.webp"
                   alt="">

              <span class="tags_red">框架</span>
            </div>

            <!-- 文章内容 -->
            <div class="right">
              <!-- 文章标题 -->
              <h2>
                <a href="javascript:;">如何在繁重的工作中持续成长？</a>
              </h2>

              <!-- 文章摘要 -->
              <p class="list-length">
                在加班文化盛行的互联网文化中，很多开发者为自己的个人成长感到迷茫。这篇文章将会从我的个人经历出发，从打破成长的误区、如何高效的利用时间、以及坚持沉淀和写作三个方面介绍，如何在繁重的工作中也可以做到持续
              </p>

              <!-- 文章信息 -->
              <div class="meta">
                <!-- 作者头像 -->
                <a href="javascript:;">
                  <img src="@/assets/image/user.png" alt="">
                  <span>Admin</span>
                </a>

                <div>
                  <!-- 文章点赞数 -->
                  <a href="javascript:;"><i class="iconfont icon-dianzan"></i>482</a>
                  <!-- 文章浏览量 -->
                  <a href="javascript:;"><i class="iconfont icon-huo"></i>42364</a>
                  <!-- 文章发布时间 -->
                  <a href="javascript:;"><i class="iconfont icon-shijian"></i>2022-4-11 </a>
                </div>
              </div>
            </div>
          </li>
        </ul>

        <!-- 分页 -->
        <div class="pagination">
          <a href="javascript:;">‹‹</a>
          <a href="javascript:;">‹</a>
          <a href="javascript:;" class="paginationAction">1</a>
          <a href="javascript:;">2</a>
          <a href="javascript:;">3</a>
          <a href="javascript:;">4</a>
          <a href="javascript:;">5</a>
          <a href="javascript:;">6</a>
          <a href="javascript:;">››</a>
        </div>

        <!-- 加载列表 -->
        <div class="loadList">
          <i class="iconfont icon-loadm"></i>
          <span>加载更多</span>
        </div>
      </div>

      <!-- 功能模块 -->
      <div class="function">
        <div class="sticky">
          <!-- 作者详情 -->
          <div class="author">
            <!-- 背景图片 -->
            <div class="author-bg">
              <!-- 头像 -->
              <div class="avatar">
                <img src="@/assets/image/user.png" alt="">
              </div>
            </div>

            <!-- 作者信息 -->
            <div class="text">
              <h4>
                <a href="javascript:;">悦兴</a>
                <div class="medal"></div>
              </h4>
              <p>也许，将会是最好用的博客管理系统</p>
            </div>

            <!-- 功能 -->
            <div class="fun">
              <!-- 发布文章 -->
              <div class="login"><a href="javascript:;">登录</a></div>

              <span></span>

              <!-- 登录后台 -->
              <div class="register"><a href="javascript:;">注册</a></div>
            </div>
          </div>

          <!-- 随机文章 -->
          <div class="containerA">
            <!-- 标题 -->
            <div class="title">
              <h3><i class="iconfont icon-suijishushengcheng"></i> 随机文章</h3>
              <!-- 小圆点 -->
              <div class="dots">
                <ol>
                  <li></li>
                  <li></li>
                  <li></li>
                </ol>
              </div>
            </div>

            <!-- 随机文章 -->
            <div class="random_Alist">
              <ul>
                <li>
                  <i class="iconfont icon-xiangyoujiantou"></i>
                  <a href="javascript:;">2022 年的 React 生态</a>
                </li>

                <li>
                  <i class="iconfont icon-xiangyoujiantou"></i>
                  <a href="javascript:;">字节跳动自研高性能微服务框架 Kitex 的演进之旅</a>
                </li>

                <li>
                  <i class="iconfont icon-xiangyoujiantou"></i>
                  <a href="javascript:;">两年前端，广州求职，要价 14k，依我说，小伙子可以多要点，涉及组件建设、工程化以及丰富的项目经验</a>
                </li>

                <li>
                  <i class="iconfont icon-xiangyoujiantou"></i>
                  <a href="javascript:;">解放双手！推荐一款阿里开源的低代码工具，YYDS！</a>
                </li>

                <li>
                  <i class="iconfont icon-xiangyoujiantou"></i>
                  <a href="javascript:;">Web3.0来了，花呗借呗前端团队开源的Web图形引擎会成为元宇宙的技术支撑吗？</a>
                </li>

                <li>
                  <i class="iconfont icon-xiangyoujiantou"></i>
                  <a href="javascript:;">超越 Nginx！号称下一代 Web 服务器，用起来够优雅！</a>
                </li>
              </ul>
            </div>
          </div>

          <!-- 标签栏 -->
          <div class="containerA">
            <!-- 标题 -->
            <div class="title">
              <h3><i class="iconfont icon-tuya_huabanfuben"></i> 标签栏</h3>
              <!-- 小圆点 -->
              <div class="dots">
                <ol>
                  <li></li>
                  <li></li>
                  <li></li>
                </ol>
              </div>
            </div>

            <!-- 标签 -->
            <div class="containerA_Tags">
              <a href="javascript:;">HTML</a>
              <a href="javascript:;">CSS</a>
              <a href="javascript:;">Vue</a>
              <a href="javascript:;">jQuery</a>
              <a href="javascript:;">Vue</a>
              <a href="javascript:;">React</a>
              <a href="javascript:;">Angular</a>
              <a href="javascript:;">less</a>
              <a href="javascript:;">Node.js</a>
              <a href="javascript:;">Bootstrap</a>
              <a href="javascript:;">Element</a>
              <a href="javascript:;">scss</a>
              <a href="javascript:;">uni-app</a>
              <a href="javascript:;">Foundation</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="css">
@import "@/assets/lib/font/iconfont.css";
@import "@/assets/index.css";
@import "@/assets/init.css";
@import "@/assets/public.css";
@import "@/assets/Responsive.css";
@import "@/assets/assembly.css";
@import "@/assets/lib/swiper/swiper-bundle.min.css";


</style>
